<template>
  <div class="main-contianer">
    <el-dialog class="dialog-container" 
      v-if="chartDialogAtt.open" 
      :title="chartDialogAtt.title" 
      width="600px" 
      :visible.sync="chartDialogAtt.open" 
      append-to-body>
      <chartDialog :name="chartDialogAtt.title" :stockId="stockId"></chartDialog>
    </el-dialog>
    <div class="left-container">
      <div class="left-top boder-container">
        <div class="title-class">料仓数据</div>
        <div class="body-container">
          <leftTop ref="leftTop" :radarRealData="radarRealData" :chooseIndex="chooseIndex"></leftTop>
        </div>
      </div>
      <div class="left-bottom boder-container" @click="openChartDialog('物位曲线')">
        <div class="title-class">物位曲线</div>
        <div class="body-container">
          <leftBottom ref="leftBottom" :siloResult="siloResult"></leftBottom>
        </div>
      </div>
    </div>
    <div ref="surfaceChart" class="surface-chart"></div>
    <div class="right-container">
      <div class="right-top boder-container">
        <div class="title-class">料仓状态</div>
        <div class="body-container" style="overflow: auto;">
          <rightTop :siloWithConfList="siloWithConfList"></rightTop>
        </div>
      </div>
      <div class="right-middle boder-container">
        <div class="title-class">报警信息</div>
        <div class="body-container" style="overflow: auto;">
          <rightMiddle ref="rightMiddle" :warnMessage="warnMessage"></rightMiddle>
        </div>
      </div>
      <div class="right-bottom boder-container" @click="openChartDialog('体积质量曲线')">
        <div class="title-class">体积质量曲线</div>
        <div class="body-container">
          <rightBottom ref="rightBottom" :siloResult="siloResult"></rightBottom>
        </div>
      </div>
    </div>
    <div class="bottom-container boder-container">
      <div class="title-class">料仓监测</div>
      <div class="body-container">
        <bottomContainer :radarRealData="radarRealData"></bottomContainer>
      </div>
    </div>

  </div>
</template>

<script>

import * as echarts from "echarts";
import 'echarts-gl';
import moment from "moment";

import initModelMethod from '@/views/radarSilo/initModel/initModelMethod';
import {selectSiloList} from '@/api/radar/radarSilo';
import {selectSiloResult} from '@/api/radar/radarResult';
import { getRealData } from "@/api/radar/radarReal"; 
import {selectWarnMessage} from "@/api/radar/radarWarn"; 

import bottomContainer from "./radarSilo/firstPage/bottomContainer.vue";
import leftBottom from "./radarSilo/firstPage/leftBottom.vue";
import rightBottom from "./radarSilo/firstPage/rightBottom.vue";
import rightTop from './radarSilo/firstPage/rightTop.vue';
import rightMiddle from './radarSilo/firstPage/rightMiddle.vue'
import leftTop from "./radarSilo/firstPage/leftTop.vue";
import chartDialog from "./radarSilo/firstPage/chartDialog.vue";

export default {
  components: { 
    bottomContainer,
    leftBottom,
    rightBottom,
    rightTop,
    rightMiddle,
    leftTop,
    chartDialog
   },
  data(){
    return{
      stockId:undefined,
      siloWithConfList:undefined,
      chooseIndex:undefined,
      series:[],
      legend:[],
      maxMins:undefined,
      option:undefined,
      surfaceChart:undefined,  //曲面
      radarRealData:undefined, //实时数据 料位 质量等
      realInterval:undefined,  
      siloResult:undefined,   //历史数据
      warnMessage:undefined,   //报警信息
      surfaceIndex:undefined,
      chartDialogAtt:{
        open:false,
        title:"",
      }
    }
  },
  watch: {
    stockId:{
      // deep:true,
      handler(newValue){
        this.initSiloModel();
      }
    }
  },
  mounted(){
    this.initData();
    
     window.onresize = () => {
      setTimeout(()=>{
       return (() => {
            this.surfaceChartResize()
            this.$refs.leftTop.heightChartResize();
            this.$refs.leftBottom.historyChartResize();
            this.$refs.rightBottom.historyChartResize();
        })()
      },200)
    }
    this.$bus.$on('bottomContainer',val=>{this.stockId = val});
  },
  beforeDestroy(){
    if(this.surfaceChart){
      this.surfaceChart.dispose();
      this.surfaceChart = null;
    } 
    this.$bus.$off('bottomContainer');
    if(this.realInterval){
      clearInterval(this.realInterval)
    }
  },
  methods:{
//物位 曲线    平均，高位，低位
//体积质量曲线
    initData(){
      selectSiloList({type:'1'}).then(res=>{
        this.siloWithConfList = res.data.data
        // console.log(this.siloWithConfList)
        if(!this.stockId)this.stockId = this.siloWithConfList[0].siloStockId;
      })
    },
    realMethods(){
      // this.initSurface(); //获取曲面数据
      this.initData();    //获取料仓数据
      this.getRealData();  //获取实时数据
      this.getSiloResult(); //获取历史数据
      this.getWarnMessage(); //获取报警信息
    },
    initSiloModel(){
      // siloConfName siloInitId siloParam;
      // console.log(this.stockId)
      this.chooseIndex = this.siloWithConfList.findIndex((item) => item.siloStockId == this.stockId); 
      if(this.chooseIndex == -1){
        this.$modal.msgError("该料仓未建立")
        return
      }
      var siloConf = this.siloWithConfList[this.chooseIndex];
      var object = initModelMethod.initConfModel(siloConf);
      this.maxMins = object.realMaxMins;
      this.series = object.series;
      this.legend = object.legend;
      // var siloInitId = JSON.parse(siloConf.siloInitId);
      // var siloParam = JSON.parse(siloConf.siloParam);
      // siloInitId.forEach((item,index) => {
      //   if(item == '1'){
      //     var series = allModel.circleBarModel(siloParam[index],this.series.length);
      //     this.series.push(series)
      //   }
      // });
      //这里添加一个interval,实时数据和实时曲面同时获取
      this.realMethods();
      // this.realInterval = setInterval(()=>{
      //   this.realMethods();
      // },20000)
    },

    initSurface(){
      // getSurface({stockId:this.stockId}).then(res=>{

      // })
      var index = this.radarRealData.findIndex((item) => item.stockId == this.stockId);
      var surfaceData = JSON.parse(this.radarRealData[index].siloSurface)
      this.legend.push('曲面');
      this.series.push({
        name:'曲面',
        type: 'surface',
        data: surfaceData,
        wireframe: {
          show: false
        },
        silent: true,
      })
      this.surfaceIndex = this.series.length - 1;
      if(this.surfaceChart){
        this.editMax();
        // this.series[this.surfaceIndex].data = surfaceData;
        this.option.visualMap[1].min = this.radarRealData[index].linerMin;
        this.option.visualMap[1].max = this.radarRealData[index].linerMax;
        this.option.visualMap[1].seriesIndex = this.surfaceIndex;
        this.option.series = this.series;
        this.option.title.text = this.siloWithConfList[this.chooseIndex].siloStockName
      }else{


        this.option = {
          title:{
            text:this.siloWithConfList[this.chooseIndex].siloStockName,
            left: 'center',
            textStyle:{
              color:'#fff'
            }
          },
          tooltip: {
            show:false,
          },
          legend:{
            // right:'1%',
            top:'30',
            data:this.legend,
            textStyle:{
              color:'#fff'
            }
          },
          animation: false,
          visualMap:[ {
            show: false,
            inRange: {
              color: [
                'rgba(255,255,255,0.2)'
              ]
            }
          },{
            seriesIndex:this.surfaceIndex,
            show: false,
            min: this.radarRealData[index].linerMin,
            max: this.radarRealData[index].linerMax,
            inRange: {
              color: [
                  'rgb(0,0,205)',
                  'rgb(72,209,204)',
                  'rgb(0,255,127)',
                  'rgb(255,255,0)',
                  'rgb(255,0,0)'
                ]
            }
          }],
          xAxis3D: {
            // axisPointer: { show: false }
            min:this.maxMins[0],
            max:this.maxMins[1],
            nameTextStyle:{
              color:'#fff'
            },
            axisLine:{
              lineStyle:{
                color:'#fff'
              },
            },
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            splitLine:{
              show:false
            }

          },
          yAxis3D: {
            // axisPointer: { show: false }
            min:this.maxMins[2],
            max:this.maxMins[3],
            nameTextStyle:{
              color:'#fff'
            },
            axisLine:{
              lineStyle:{
                color:'#fff'
              },
            },
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            splitLine:{
              show:false
            }
            
          },
          zAxis3D: {
            nameTextStyle:{
              color:'#fff'
            },
            axisLine:{
              lineStyle:{
                color:'#fff'
              },
            },
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            splitLine:{
              show:false
            }
            // axisPointer: { show: false }
          },
          grid3D: {},
          series: this.series,
        };
        this.surfaceChart = echarts.init(this.$refs.surfaceChart);
      }
      this.surfaceChart.setOption(this.option,true);

    }, 
    editMax(){
      this.option.xAxis3D.min = this.maxMins[0];
      this.option.xAxis3D.max = this.maxMins[1];
      this.option.yAxis3D.min = this.maxMins[2];
      this.option.yAxis3D.max = this.maxMins[3];
    },
    surfaceChartResize(){
      if(this.surfaceChart) {
        this.surfaceChart.resize()
      }
    },
    getRealData(){
      getRealData({}).then(res=>{
        this.radarRealData = res.data;
        this.initSurface();

      });
    },
    getSiloResult(){
      var startTime = moment().subtract(1, "days").format('YYYY-MM-DD HH:mm:ss');
      var endTime = moment().format("YYYY-MM-DD HH:mm:ss");
      selectSiloResult({type:"1",stockId:this.stockId,startTime:startTime,endTime:endTime}).then(res=>{
        this.siloResult = res.data.data;
      });
    },
    getWarnMessage(){
      var startTime = moment().subtract(1, "days").format('YYYY-MM-DD HH:mm:ss');
      var endTime = moment().format("YYYY-MM-DD HH:mm:ss");
      // 
      selectWarnMessage({startTime:startTime,endTime:endTime}).then(res=>{
        this.warnMessage =  res.data;
      });
    },
    openChartDialog(title){
      this.chartDialogAtt.title = title;
      this.chartDialogAtt.open = true;
    },

  }



}
</script>

<style lang="scss" scoped>
.main-contianer{
  position: absolute;
  width: 100%;
  height: 100%;
}
.boder-container{
  // border: 5px double;
  // border-radius: 16px;
  // box-sizing: border-box  
  border: 1px solid #034c6a;
  box-shadow: 0px 0 55px rgba(255,255,255,.1) inset;
}
.left-container{
  position: absolute;
  left: 0%;
  width: 25%;
  height: 100%;
}
.left-top{
  position: absolute;
  top: 10px;
  left: 5px;
  width: calc(100% - 5px);
  height: calc(70% - 15px);
}
.left-bottom{
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 5px);
  height: calc(30% - 5px);
  cursor: pointer;
}

.surface-chart{
  position: absolute;
  top:10px;
  left: 25%;
  width: 50%;
  height: calc(70% - 10px);
  // border:1px solid;
  // box-sizing: border-box;
}

.right-container{
  position: absolute;
  right:0%;
  width: 25%;
  height: 100%;
}
.right-top{
  position: absolute;
  top: 10px;
  right: 5px;
  width: calc(100% - 5px);
  height: calc(35% - 10px);
}
.right-middle{
  position: absolute;
  top: calc(35% + 5px);
  right: 5px;
  width: calc(100% - 5px);
  height: calc(35% - 10px);
}
.right-bottom{
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: calc(100% - 5px);
  height: calc(30% - 5px);
  cursor: pointer;
}
.bottom-container{
  position: absolute;
  bottom: 5px;
  left: calc(25% + 5px);
  width: calc(50% - 10px);
  height: calc(30% - 5px);
}
.title-class{
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  margin-left:20px;
}
.body-container{
  // width: 100%;
  height: calc(100% - 29px);
}
::v-deep .el-dialog__body {
  padding: 0px 20px 20px;
}



</style>